<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            width: 375px;
            height: 50px;
            border: 2px solid red;
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        .left,.right{
            width: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 30px;
        }
        .list{
            flex-grow: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style: none;
        }

        


    </style>
</head>
<body>
    <!-- slot:插槽 -->
    <!-- 组件的插槽：
         组件的插槽也是为了让我们封装的组件更加具有扩展性。
         让使用者可以决定组件内部的一些内容到底展示什么。
 -->
    <!-- 插槽的具体使用：
        1.在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。
        2.该插槽插入什么内容取决于父组件如何使用。
     -->

     <!-- 具名插槽：一个组件中可以不只一个插槽，但是使用的时候，如果直接插入内容，
        就会是默认给每一个插槽都填入插入的内容，内容就可能会重复，
        因此需要使用具名插槽，给每一个插槽取名字，使用的时候绑定插槽名字，
        就可以把内容插入指定插槽
     -->

     <div id="app">
        <!-- 1.不插入插槽内容，使用默认的插槽内容 -->
        <my-cpn></my-cpn>

        <!-- 2.插入插槽内容 -->
        <my-cpn>
            <h2>购物车</h2>
            <!-- 表示这些html元素都插入到一个插槽 -->
        </my-cpn>

        <my-cpn>
            <!-- 使用具体插槽：添加slot属性 -->
            <h2 slot="one">购物车</h2>
            <h4 slot="two">(12)</h4>
            <!-- 表示这些html元素都插入到一个插槽 -->
        </my-cpn>

        <my-cpn>
            <!-- 注意：一旦插槽变为具名插槽，使用的时候必须要添加slot属性，绑定插槽名字，否则就无效 -->
            <ul class="list" slot="one">
                <li>商品</li>
                <li>评价</li>
                <li>详情</li>
                <li>推荐</li>
            </ul>
            <!-- 表示这些html元素都插入到一个插槽 -->
        </my-cpn>

     </div>
     <script src="./vue.js"></script>

     <template id="mycpn">
        <div class="header">
            <div class="left"> &lt; </div>
            <!-- 中间内容不同，使用slot元素，作为插槽 -->
            <!-- 具名插槽：添加name属性 -->
            <slot name="one">插槽的默认内容1</slot>
            <slot name="two">插槽的默认内容2</slot>
            <div class="right"> ... </div>
        </div>

     </template>
     <script>
        Vue.component("my-cpn",{
            template:"#mycpn"
        })
        let app=new Vue({
            el:"#app"
        })
     </script>
</body>
</html>